<template>
	<view class="setPassword">
		<!-- 设置新密码 -->
		<view class="header">
			<image class="image" src="/static/image/universal/arrows.png" mode="" @click="goBack"></image>
			<view class="text">
				重置密码
			</view>
		</view>
		
		<view class="content">
			<view class="nav">
				<view class="number">
					1
				</view>
				<view class="mobile">
					设置新密码
				</view>
			</view>
			
			<view class="inputBox">
				<image v-if="isShowPassword1" class="img1" src="/static/image/login/password2.png" mode=""></image>
				<image v-else class="img1" src="/static/image/login/password1.png" mode=""></image>
				<input class="input" type="number" :password="isPawssword1" v-model="password" @input="passInput1" placeholder="请设置6~20位新登录密码" placeholder-style="color: #A7AEBD;font-weight: 600;" />
				<u-icon class="img2 bolck" v-if="isShowPaw1" name="eye" color="#7E8DA2" size="22" @click="getPwd1"></u-icon>
			</view>
			<view class="inputBox m40">
				<image v-if="isShowPassword2" class="img1" src="/static/image/login/password2.png" mode=""></image>
				<image v-else class="img1" src="/static/image/login/password1.png" mode=""></image>
				<input class="input" type="number" :password="isPawssword2" v-model="newPassword" @input="passInput2" placeholder="请再次输入新的登录密码" placeholder-style="color: #A7AEBD;font-weight: 600;" />
				<u-icon class="img2 bolck" v-if="isShowPaw2" name="eye" color="#7E8DA2" size="22" @click="getPwd2"></u-icon>
			</view>
		</view>
		
		<view class="button" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	
	export default{
		data() {
			return {
				password: "",    
				newPassword: "",
				isPawssword1: true,
				isPawssword2: true,
				isShowPassword1: false,       // 是否显示(选中的)密码框
				isShowPassword2: false,
				isShowPaw1: false,
				isShowPaw2: false,
			}
		},
		methods: {
			// 切换第一个密码框(密码模式还是普通模式)
			getPwd1(){
				if(this.isPawssword1 === true){
					this.isPawssword1 = false
				}else{
					this.isPawssword1 = true
				}
			},
			
			// 切换第二个密码框(密码模式还是普通模式)
			getPwd2(){
				if(this.isPawssword2 === true){
					this.isPawssword2 = false
				}else{
					this.isPawssword2 = true
				}
			},
			
			// 
			passInput1(e){
				if(e.detail.value){
					this.isShowPassword1 = true
					this.isShowPaw1 = true
				}else{
					this.isShowPassword1 = false
					this.isShowPaw1 = false
				}
			},
			
			passInput2(e){
				if(e.detail.value){
					this.isShowPassword2 = true
					this.isShowPaw2 = true
				}else{
					this.isShowPassword2 = false
					this.isShowPaw2 = false
				}
			},
			
			// 提交
			submit(){
				
			},
			
			// 返回上一级
			goBack(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setPassword{
		padding: 146rpx 72rpx;
		
		.header{
			display: flex;
			.image{
				width: 94rpx;
				height: 94rpx;
				margin-right: 20rpx;
			}
			.text{
				font-size: 64rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 600;
				color: #223247;
				line-height: 94rpx;
			}
		}
		
		.content{
			margin-top: 82rpx;
			.nav{
				display: flex;
				height: 76rpx;
				line-height: 76rpx;
				padding-left: 14rpx;
				margin-bottom: 88rpx;
				.number{
					width: 76rpx;
					height: 76rpx;
					background: #2F80ED;
					box-shadow: 0rpx 16rpx 18rpx 2rpx rgba(47, 128, 237, 0.27);
					border-radius: 50%;
					color: #FFFFFF;
					text-align: center;
				}
				.mobile{
					font-size: 40rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 600;
					color: #445469;
					margin-left: 30rpx;
				}
			}
			
			.inputBox{
				width: 100%;
				height: 110rpx;
				position: relative;
			}
			.input{
				width: 100%;
				height: 100%;
				background-color: #F5F7FA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding: 0rpx 90rpx;
				box-sizing: border-box;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 600;
				color: #2F80ED;
			}
			.m40{
				margin-top: 40rpx;
			}
			.img1{
				position: absolute;
				top: 30rpx;
				left: 25rpx;
				width: 52rpx;
				height: 52rpx;
			}
			
			.img2{
				position: absolute;
				width: 52rpx;
				height: 52rpx;
				top: 32rpx;
				right: 25rpx;
			}
		}
		
		.button{
			width: 100%;
			height: 110rpx;
			background: #2F80ED;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			line-height: 110rpx;
			color: #FFFFFF;
			font-size: 40rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 600;
			text-align: center;
			margin-top: 180rpx;
		}
	}
	/deep/ .u-icon--right{
		position: absolute;
		top: 32rpx;
		right: 25rpx;
		display: inline-block !important;
	}
</style>
